<template>
    <div class="index">
        <header class="clearfix">
            <img class="fl" src="../assets/logo.png" alt="">
            <h1 class="fl">电商管理系统</h1>
            <el-button class="fr out" @click="out">退出</el-button>
        </header>
        <section>
            <!-- 菜单 -->
            <aside>
                <p class="top" @click="open">|||</p>
                  <el-menu
                   :style="flag ? 'width:63px' : 'width:240px'"
                        active-text-color="#ffd04b"
                        background-color="#545c64"
                        class="el-menu-vertical-demo"
                        :default-active="path"
                        :unique-opened="true"
                        
                        default-openeds
                        router
                        text-color="#fff"
                        :collapse="flag"
                    >
                        <el-sub-menu :index="item.id" v-for="(item, index) in menus" :key="item.id">
                        <template #title>
                            <el-icon><location /></el-icon>
                            <span>{{item.authName}}</span>
                        </template>
                            <el-menu-item-group v-for="(it, ind) in item.children" :key="it.id" @click="getBreadName(item.authName,it.authName,it.path)"> 
                                <el-menu-item :index="it.path">{{it.authName}}</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
            </aside>
            <main>
                <Bread :fatherName="fatherName" :childName="ChildName" />
                <el-card>
                    <router-view></router-view>
                </el-card>
            </main>
        </section>
    </div>
</template>
<script setup>
import Bread from '@/components/Bread.vue'
import { Menus } from '../utils/login.js'
import { useStore } from 'vuex'
import { ref ,onMounted } from 'vue'
const menus = ref([]);
const flag = ref(false);
// const width = ref(false);
const fatherName = ref('欢迎');
const ChildName = ref('');
const path = ref('');
onMounted(async () => {
    let {data:res} = await Menus();
    menus.value = res;
    console.log(menus.value);
    path.value = localStorage.getItem('path');
})
const store = useStore();

const out = ()=>{
    store.commit('Out');
}
const open = ()=>{
    flag.value = !flag.value;
}
const getBreadName = (itemName,itName,path)=>{
    fatherName.value = itemName;
    ChildName.value = itName;
    localStorage.setItem('path', path);
}
</script>
<style lang="scss" scoped>
    .index{
        width: 100%;
        height: 100%;
        // background: #ccc;
        display: flex;
        flex-direction: column;
        header{
            width: 100%;
            height: 70px;
            background: rgb(67, 74, 80);
            line-height: 70px;
            &>img{
                width: 60px;
                margin: 5px 15px;
            }
            h1{
                color: #fff;
            }
            .out{
                margin-right: 15px;
                margin-top: 17px;
            }
        }
        section{
            flex: 1;
            background: #fff;
            display: flex;
            flex-direction: row;
            overflow: auto;
            aside{
                height: 100%;
                background: rgb(67, 74, 80);
                .top{
                    background: #545c64;
                    text-align: center;
                    line-height: 30px;
                    color: #fff;
                    width: 100%;
                }
                .el-menu{
                    width: 100%;
                }
            }
            main{
                flex: 1;
                background: #ccc;
                padding: 20px;
                height: 100%;
                overflow: auto;
            }
        }
    }
</style>